<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
<div class="layout">
    <header>头部</header>
    <nav>导航</nav>
    <main>主要内容</main>
    <aside>侧边栏</aside>
    <footer>底部</footer>
</div>

<style>
    .layout {
        display: grid;
        grid-template-areas:
            "header header header"
            "nav main aside"
            "footer footer footer";
        grid-template-columns: 200px 1fr 200px;
        gap: 20px;
    }

    header {
        grid-area: header;
    }

    nav {
        grid-area: nav;
    }

    main {
        grid-area: main;
    }

    aside {
        grid-area: aside;
    }

    footer {
        grid-area: footer;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .layout {
            grid-template-areas:
                "header"
                "nav"
                "main"
                "aside"
                "footer";
            grid-template-columns: 1fr;
        }
    }
</style>
    
    
</body>
</html>